<!--
 * @Description: 日志管理
 * @Author: xuzp4
 -->
<template>
  <div class="parent d-flex flex-column">
    <div class="header">
      <el-form inline :model="formData">
        <el-form-item :label="$t('zhuapaijilu.shaixuantiaojian')">
          <MyDatePicker v-model="formData.start_time"> </MyDatePicker>
        </el-form-item>
        <el-form-item :label="$t('zhuapaijilu.zhi')">
          <MyDatePicker v-model="formData.stop_time"> </MyDatePicker>
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="formData.log_type"
            :options="options"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.user_name">
            <el-option
              v-for="item in user_name_list"
              :key="item.value"
              :label="item.user_name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <MyButton class="confirm" @click="search">{{
            $t("common.confirmQueding")
          }}</MyButton>
          <MyButton class="export" @click="handleExport">{{
            $t("common.export")
          }}</MyButton>
        </el-form-item>
      </el-form>
    </div>
    <MyTable
      ref="table"
      class="flex-1"
      :data="tableData"
      stripe
      style="width: 100%"
      :key="Math.random()"
    >
      <el-table-column
        width="180"
        type="index"
        :label="$t('common.order_number')"
        sortable
      ></el-table-column>
      <el-table-column
        v-if="params.msg_id === '1318'"
        prop="user_name"
        :label="$t('logs_edit_person')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="log_type"
        :label="$t('logs_type')"
        sortable
        min-width="180"
        :formatter="formatLogType"
      ></el-table-column>
      <el-table-column
        v-if="params.msg_id === '1319'"
        prop="log_code"
        :label="$t('logs_edit_content')"
        sortable
        min-width="180"
        :formatter="formatLogCode"
      ></el-table-column>
      <el-table-column
        v-if="params.msg_id === '1318'"
        prop="msg_id"
        :label="$t('logs_edit_content')"
        sortable
        min-width="180"
        :formatter="formatLogDesc"
      ></el-table-column>
      <el-table-column
        v-if="params.msg_id === '1318'"
        prop="op_result"
        :label="$t('logopt_result')"
        sortable
        min-width="180"
        :formatter="formatOpResult"
      ></el-table-column>
      <el-table-column
        v-if="params.msg_id === '1319'"
        prop="log_time"
        :label="$t('logs.log_time')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        v-if="params.msg_id === '1318'"
        prop="op_time"
        :label="$t('logs_edit_time')"
        sortable
        min-width="180"
      ></el-table-column>
    </MyTable>
    <Pagination
      v-show="total_num > 10"
      :total="total_num"
      :page.sync="pageNumber"
      :limit.sync="qry_len"
      @pagination="getList()"
    />
  </div>
</template>

<script>
import MyDatePicker from "@/components/DatePicker";
import MyButton from "@/components/Button";
import moment from "moment";
import { findLogs, exportLogs } from "./service";
import { getUserList } from "@/views/yonghuguanli/user/service";
export default {
  components: { MyButton, MyDatePicker },
  data() {
    return {
      tableData: [],
      params: {},
      total_num: 0,
      qry_len: 10,
      pageNumber: 1,
      formData: {
        start_time: moment()
          .startOf("day")
          .subtract(7, "days")
          .format("YYYY-MM-DD HH:mm:ss"),
        stop_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
        log_type: ["1318", void 0],
      },
      options: [
        {
          label: this.$t("logs.logs"),
          value: "1319",
          children: [
            { label: this.$t("allTip"), value: void 0 },
            { label: this.$t("logs_open"), value: 1 },
            { label: this.$t("logs_off"), value: 2 },
            { label: this.$t("sys_info_reboot"), value: 3 },
            { label: this.$t("logs_web_off"), value: 4 },
          ],
        },
        {
          label: this.$t("logs_edit_user"),
          value: "1318",
          children: [
            { label: this.$t("allTip"), value: void 0 },
            { label: this.$t("login.title"), value: 1 },
            { label: this.$t("logout"), value: 2 },
            { label: this.$t("logs_fun_edit"), value: 3 },
          ],
        },
      ],
      user_name_list: [],
    };
  },
  computed: {
    start_no: {
      get() {
        return 1 + this.qry_len * (this.pageNumber - 1);
      },
    },
  },
  mounted() {
    this.getUserList();
    this.getList();
  },
  methods: {
    search() {
      this.pageNumber = 1;
      this.tableData = [];
      this.getList();
    },
    async getList() {
      const params = (this.params = {
        ...this.formData,
        qry_len: this.qry_len,
        start_no: this.start_no,
        msg_id: this.formData.log_type[0],
        log_type: this.formData.log_type[1],
      });
      const res = await findLogs(params);
      this.$set(this, "tableData", res.data.record);
      this.total_num = res.data.total_num;
    },
    async getUserList() {
      const res = await getUserList();
      if (res.code == 0) {
        res.data = res.data.map((item) => {
          return { user_name: item.user_name, value: item.user_name };
        });
        this.user_name_list = res.data.concat({
          user_name: this.$t("all_user_name"),
          value: void 0,
        });
      }
      return true;
    },
    handleExport() {
      const params = {
        ...this.params,
        export_type: this.params.msg_id === "1318" ? 1 : 2,
      };
      exportLogs(params);
    },
    formatLogType(row, column, cellValue) {
      const log_type_list = this.options.find(
        (item) => item.value === this.params.msg_id
      );
      if (log_type_list) {
        const log_type_item = log_type_list.children.find(
          (item) => item.value === cellValue
        );
        return log_type_item ? log_type_item.label : cellValue;
      }
      return cellValue;
    },
    formatOpResult(row, column, cellValue) {
      return this.$t("message." + cellValue);
    },
    formatLogDesc(row, column, cellValue) {
      return this.$t("msgCode." + cellValue);
    },
    formatLogCode(row, column, cellValue) {
      return this.$t("sysCode." + cellValue);
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
}
</style>
